<template>
	<scroll-view class="content" scroll-y="true" @scrolltolower="getMore">
		<view class="memberBox">
			<view class="memberItem" v-for="(item,index) in data" :key="index">
				<image :src="item.avatar" class="avatar"></image>
				<text class="name">{{item.nickname}}</text>
				<view class="delete" v-if="admin==1" @click="deleteMember(item.id,index)">
					x
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				baseurl: this.$baseurl,
				id: '',
				data: [],
				page: 1,
				admin: 0
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.admin = options.admin;
			this.$request.get(`CommunityUser/member_list?id=${this.id}&page=${this.page}&limit=10`).then(res => {
				console.log(res);
				this.data.push(...res.data.data);
			})
		},
		methods: {
			deleteMember(id,index) {
				uni.showModal({
					title: '提示',
					content: '是否删除该成员',
					success: (res) => {
						if (res.confirm) {
							this.$request.get(`CommunityUser/del_user?id=${id}`)
								.then(res => {
								this.$u.toast('删除成功');
								this.data.splice(index, 1);
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			getMore() {
				this.page++;
				this.$request.get(`CommunityUser/member_list?id=${this.id}&page=${this.page}&limit=50`).then(res => {
					this.data.push(...res.data.data);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 滚动容器：仅保留纵向滚动，高度占满屏幕 */
	.content {
		width: 100%;
		height: 100vh;
		background-color: #fff; // 避免透明背景导致内容重叠
	}

	/* 成员容器：关键布局 - 一行4个 + 自动换行 */
	.memberBox {
		width: 100%;
		padding: 80rpx 20rpx 20rpx; // 上80rpx，左右20rpx，下20rpx（避免底部内容被遮挡）
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap; // 核心：超过一行自动换行
		gap: 26rpx; // 元素之间的间距（横向+纵向，替代margin，更均匀）
		justify-content: flex-start; // 从左到右排列，避免最后一行分散
	}

	/* 成员项：固定宽度，确保一行4个 */
	.memberItem {
		// 计算宽度：(100% - 3个间距) / 4 → 确保一行正好4个
		width: calc((100% - 3 * 26rpx) / 4);
		display: flex;
		flex-direction: column;
		align-items: center; // 内部元素水平居中
		position: relative;
		margin-bottom: 20rpx; // 纵向额外间距（可选）
	}

	/* 成员头像 */
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}

	/* 成员名称 */
	.name {
		font-size: 24rpx;
		font-weight: 700;
		width: 100%;
		text-align: center;
		margin-top: 25rpx;
		white-space: nowrap; // 防止名称换行
		overflow: hidden; // 超出部分隐藏
		text-overflow: ellipsis; // 超出显示省略号
	}

	/* 删除按钮 */
	.delete {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background-color: #D95945;
		font-size: 22rpx; // 缩小字体，避免“x”溢出
		text-align: center;
		line-height: 32rpx;
		color: #fff;
		top: -16rpx;
		right:10rpx;
		position: absolute;
		touch-action: none; // 防止触摸误触发滚动
	}
</style>